<template>
  <div class="goodsinfo">
     <transition 
      @before-enter="beforeEnter"
		  @enter="enter"
		  @after-enter="afterEnter"
        name="fade">
        <div class="ball" v-show="flag" id="bal"></div>
      </transition>
    <!-- 商品轮播图区域 -->
    <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
					  <swiper :swip="swip" :isfull="false"></swiper>
					</div>
				</div>
			</div>
      <!-- 商品购买区域 -->
			<div class="mui-card">
				<div class="mui-card-header">{{info.title}}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p class="pric">
              市场价:<span class="pre">￥{{info.market_price}} </span>
              销售价:<span class="now">￥{{info.sell_price}}</span>
            </p>
            <div class="quantity">购买数量:<numbox @getcount="getSelectesConut" :max="info.stock_quantity"></numbox>
            </div>
            <p class="btn"> 
              <mt-button type="primary" size="small" class="buy" >立即购买</mt-button>
              <mt-button type="danger" size="small" @click="add" >加入购物车</mt-button>
            </p>
					</div>
				</div>
			</div>
			 <!-- 商品参数区域 -->
			<div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号:{{info.goods_no}}</p>
						<p>库存情况:{{info.stock_quantity}}件</p>
						<p>上架时间:{{info.add_time}}</p>
					</div>
				</div>
				<div class="mui-card-footer">
					<mt-button type="primary" size="large" plain @click="godesc(id)">详情</mt-button>
					<mt-button type="danger" size="large" plain @click="gocomment(id)">评论</mt-button>
				</div>
			</div>
     
  </div>
</template>

<script>
import axios from 'axios'
import swiper from '../subcomponents/swiper.vue'
import numbox from '../subcomponents/GoodsnumberBox.vue'
export default {
  data(){
    return{
      id:this.$route.params.id, //商品id
      swip:[], //商品轮播图
      info:{}, //商品信息
      flag:false,
      count:1 
     
    };
  },
  created(){
    this.getgoodsimg()
    this.getinfo()
  },
  methods:{
    //获取商品轮播图图片
    getgoodsimg(){
      axios.get('api/getthumimages/'+this.id).then(res=>{
        res.data.message.forEach(item=>{
          item.img=item.src;
        })
        this.swip=res.data.message
      })
    },
    //获取商品信息：价格、货号、库存、上架时间
    getinfo(){
      axios.get('/api/goods/getinfo/'+this.id).then(res=>{
        this.info=res.data.message[0]
      })
    },
    //编程式导航替代<router-link>,去商品详情页
    godesc(id){
      this.$router.push({ name: 'goodsdesc', params: { id }})
    },
    //去商品评论区
    gocomment(id){
      this.$router.push({ name: 'goodscmt', params: { id }})
    },
    // 从numbox中获取数字选择框的值
    getSelectesConut(n){
      this.count=n
    },
    // 点击加入购物车后先改变flag值，小球出现，获取加入购物车商品的信息，并用vuex进行管理
    add(){
      var flag=!flag
      var goodsinfo={
      id:this.id,
      count:this.count,
      price:this.info.sell_price,
      title:this.info.title,
      img:this.swip[0].src,
      selected:true
      }
      this.$store.commit('toshopcar',goodsinfo)
    },
    //小球动画起始状态
    beforeEnter(el){
			el.style.transform="translate(0,0)"
		},
		enter(el,done){
			el.offsetWidth;
      //获取小球在页面中的位置
      const ballposition= document.getElementById("bal").getBoundingClientRect()
      // 获取徽标在页面中的位置
      const badgeposition=document.getElementById("badge").getBoundingClientRect()
      // 获取两点之间的相对位置
      const xDist=badgeposition.left-ballposition.left
      const yDist=badgeposition.top-ballposition.top

			el.style.transform=`translate(${xDist}px,${yDist}px)`
			el.style.transition="all 0.8s cubic-bezier(.4,-0.3,1,.68)"
			done()
		},
    //动画结束之后重置
		afterEnter(el){
			this.flag=!this.flag
		},
    
  },
  components:{
    swiper:swiper,
    numbox:numbox
  }
}
</script>

<style lang="less" scoped>
  .goodsinfo{
    background-color: #eee;
  }
  .mui-card{
    .pric{
      font-size: 13px;
      color: #000;
      .pre{
        padding-right: 15px;
        text-decoration: line-through;
      }
      .now{
        font-size: 15px;
        color: #f00;
      }
    }
    .btn{
      padding-top: 15px;
    }
    .buy{
      margin-right: 18px;
    }
    .mui-card-footer{
      display: block;
      .mint-button{
        margin-top: 20px;
      }
    }
  }
  .ball{
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #f00;
    position:absolute;
    top:390px;
    left: 143px;
    z-index: 99;
  }
</style>